.mapboxgl-ctrl-bottom-left {
    display: none;
}

.my-map-popup .mapboxgl-popup-content {
    background: transparent;
    padding: 0px;
    /* color: #fff; */
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-row-center {
    &:extend(.flex,
    .flex-row,
    .flex-center);
}

.flex-column-center {
    &:extend(.flex,
    .flex-column,
    .flex-center);
}

.cursor-p {
    cursor: pointer;
}

.bg-img {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.l7-control-scale-line {
    width: auto !important;
}

.l7-control-container .l7-left .l7-control:not(.l7-control--hide) {
    margin-left: 8px !important;
}

.l7-control-container .l7-top .l7-control:not(.l7-control--hide) {
    margin-top: 8px !important;
}

.l7-control-container .l7-control {
    font-size: 12px !important;
}

// ===页面主题切换过渡样式===
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 9999999;
}

::view-transition-new(root) {
    z-index: 2147483646;
}

html.dark::view-transition-old(root) {
    z-index: 2147483646;
}

html.dark::view-transition-new(root) {
    z-index: 9999999;
}

// 一行代码 暗色?
// html.dark {
//    filter: invert(1) hue-rotate(180deg);
// }

// el-dialog transition="dialog-slide"
.dialog-slide-enter-active,
.dialog-slide-leave-active,
.dialog-slide-enter-active .el-dialog,
.dialog-slide-leave-active .el-dialog {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dialog-slide-enter-from,
.dialog-slide-leave-to {
    opacity: 0;
}

.dialog-slide-enter-from .el-dialog,
.dialog-slide-leave-to .el-dialog {
    transform: translateY(-100px);
    opacity: 0;
}

// el-dialog transition="dialog-bounce"
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .el-dialog,
.dialog-bounce-leave-active .el-dialog {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
    opacity: 0;
}

.dialog-bounce-enter-from .el-dialog,
.dialog-bounce-leave-to .el-dialog {
    transform: scale(0.3) translateY(-50px);
    opacity: 0;
}

// el-dialog transition="dialog-custom-object"
.dialog-custom-object-enter-active,
.dialog-custom-object-leave-active,
.dialog-custom-object-enter-active .el-dialog,
.dialog-custom-object-leave-active .el-dialog {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dialog-custom-object-enter-from,
.dialog-custom-object-leave-to {
    opacity: 0;
}

.dialog-custom-object-enter-from .el-dialog,
.dialog-custom-object-leave-to .el-dialog {
    transform: rotate(180deg) scale(0.5);
    opacity: 0;
}

// el-dialog transition="dialog-scale"
.dialog-scale-enter-active,
.dialog-scale-leave-active,
.dialog-scale-enter-active .el-dialog,
.dialog-scale-leave-active .el-dialog {
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.dialog-scale-enter-from,
.dialog-scale-leave-to {
    opacity: 0;
}

.dialog-scale-enter-from .el-dialog,
.dialog-scale-leave-to .el-dialog {
    transform: scale(0.5);
    opacity: 0;
}
